<template>
	<view class="body">
		<zy-navbar :isLogin="isLogin" :avatarImg="avatarImg" ></zy-navbar>
		<view class="swiper-1">
			<swiper
			class="swiper"
			:indicator-dots="true"
			:autoplay="true"
			:circular="true"
			>
				<swiper-item v-for= "item in imgFav">
					<img :src="item.imgUrl">
				</swiper-item>
			</swiper>
		</view>
		<zy-videoList :videoList="videoList"></zy-videoList>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="popup.type" :message="popup.message" :duration="popup.duration"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import navbar from '../components/zy-navbar.vue';
	import videoList from '../components/zy-videoList.vue';
	import {mixins} from '../../config/refresh.js';
	let api = require('../../api/video.js');
	import tempImg from '../../static/test-swiper.jpg';
	import tempImg2 from '../../static/test-swiper-2.jpg';
	export default{
		data(){
			return {
				avatarImg:"",
				popup:{
					type:'success',
					message:'成功',
					duration:2000
				},
				isLogin:false,
				imgFav:[
					{
						title:'test-1',
						imgUrl:tempImg
					},
					{
						title:'text-2',
						imgUrl:tempImg2
					},
					{
						title:"text-3",
						imgUrl:tempImg
					},
				],
				videoList:[]
			}
		},
		async mounted(){
			// let result = await uni.request({
			// 	url:this.config.serverUrl+'/video/getVideoIndex',
			// 	method:'GET'
			// });
			// let data = result[1].data;
			// if(data.status){
			// 	data.videoList.forEach(item=>{
			// 		item.videoCover = `${this.config.serverUrl}/${item.videoCover}`;
			// 		this.videoList.push(item);
			// 	});
			// }
	
			let newList = await api.getIndexVideoList();
			console.log(newList);
			api.produceMainList(this.videoList,newList);
			console.log(this.videoList);
		},
		async onShow(){
			let key = uni.getStorageSync('libilibiUserKey');
			let userBag = uni.getStorageSync('libilibiUser');
			if(key == ''){
				this.isLogin = false;
			} else if (userBag!=""){
				this.isLogin = true;
				this.avatarImg = userBag.avatarImg;
			} else {
				let userBagRes = await uni.request({
					url:this.config.serverUrl+'/mine/getInfo',
					method:'POST',
					data:{
						userId:key.userId,
						token:key.token
					}
				});
				userBagRes[1].data.body.avatarImg = `${this.config.serverUrl}/${userBagRes[1].data.body.avatarImg}`;
				if(userBagRes[1].data.status){
					uni.setStorage({
						key:'libilibiUserBag',
						data:userBagRes[1].data.body
					});
					this.avatarImg = userBagRes[1].data.body.avatarImg;
					this.isLogin = true;
				}
				
			}
		},
		async onPullDownRefresh(){
			let result = await uni.request({
				url:this.config.serverUrl+'/video/getVideoIndex',
				method:'GET'
			});
			let data = result[1].data;
			if(data.status){
				data.videoList.forEach(item=>{
					item.videoCover = `${this.config.serverUrl}/${item.videoCover}`;
					this.videoList.shift();
					this.videoList.push(item);
				});
				uni.stopPullDownRefresh();
			}
		},
		created(){
			// console.log(this.$refs);
		},
		methods:{
			
		},
		components:{
			"zy-navbar":navbar,
			"zy-videoList":videoList
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		background-color: rgba(0,0,0,0.1);
		min-height:90vh;
	}
	// .imgFavBox{
	// 	border-radius:10px;
	// 	>img{
	// 		width:100%;
	// 		height:100%;
	// 		border-radius:10px;
	// 	}
	// }
	.swiper-1{
		margin-top:10px;
		width:95%;
		margin-left:2.5%;
		height:200px;
		.swiper{
			width:100%;
			height:200px;
		}
		img{
			width:100%;
			height:100%;
			border-radius:10px;
		}
	}
</style>
